<template>
  <div>
    <p>获取token的值</p>
    <p>下面是没有借助辅助函数的，直接从仓库的模块中去取</p>
    <p>state：{{ $store.state.user.userInfo.token }}</p>
    <p>getters：{{ $store.getters['user/getToken'] }}</p>
    <hr />
    <p>下面使用了辅助函数的，去体会一下它的简洁性</p>
    <p>{{ test }}</p>
    <p>computed userInfo {{ userInfo.token }}</p>
    <p>computed getToken {{ getToken }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    test () {
      return 'test'
    },
    // 这里要展开，这样写的目的是和我们已有的计算属性共存
    /**
     * 参数1：模块的名字
     * 参数2：是一个组件，里面映射的就是仓库模块中state的值
     */
    ...mapState('user', ['userInfo']),
    /**
     * 参数1：模块的名字
     * 参数2：user模块中的getters 的那个方法
     */
    ...mapGetters('user', ['getToken'])
  },
  mounted () {
    console.log('---updated---', this.$store)
  },
  updated () {
    console.log('---state---', this.$store.state.user.userInfo.token)
    console.log('---getters---', this.$store.getters['user/getToken'])
    console.log('-----------------------')
    console.log('---computed userInfo---', this.userInfo)
    console.log('---computed getToken---', this.getToken)
  }
}
</script>
